<template>
	<echartBox title="存量情况" width="656px" height="550px">
		<div class="storage-container">
			<div class="storage-item">
				<div class="storage-text">
					<div class="storage-title">
						{{ storageData.storage1.title }}
					</div>
					<div class="storage-value">
						{{ storageData.storage1.value }}
						<span class="storage-unit">{{
							storageData.storage1.unit
						}}</span>
					</div>
					<div class="storage-subtitle">
						{{ storageData.storage1.subtitle }}
					</div>
				</div>
				<div class="storage-chart">
					<div
						class="echart-show echart-show1"
						ref="chart1"
					></div>
				</div>
			</div>
			<div class="storage-item">
				<div class="storage-text">
					<div class="storage-title">
						{{ storageData.storage2.title }}
					</div>
					<div class="storage-value">
						{{ storageData.storage2.value }}
						<span class="storage-unit">{{
							storageData.storage2.unit
						}}</span>
					</div>
					<div class="storage-subtitle">
						{{ storageData.storage2.subtitle }}
					</div>
				</div>
				<div class="storage-chart">
					<div
						class="echart-show echart-show2"
						ref="chart2"
					></div>
				</div>
			</div>
		</div>
	</echartBox>
</template>

<script>
import * as echarts from "echarts";
import "echarts-liquidfill";
import echartBox from "../echart-box.vue";

export default {
	name: "Page1ItemBox4",
	components: {
		echartBox,
	},
	props: {
		storageData: {
			type: Object,
			required: true,
			default: () => ({
				storage1: {
					title: "管存量",
					value: 999999,
					unit: "万/m³",
					subtitle: "管存占比",
					percentage: 32
				},
				storage2: {
					title: "罐存量", 
					value: 999999,
					unit: "万/m³",
					subtitle: "罐存占比",
					percentage: 78
				}
			})
		}
	},
	methods: {
		// 初始化图表的统一方法名
		initChart() {
			this.buildStorageChart1();
			this.buildStorageChart2();
		},
		// 构建左侧液体填充图表
		buildStorageChart1() {
			let chartContainer = this.$refs.chart1;
			let myChart = echarts.init(chartContainer);
			const value = this.storageData.storage1.percentage / 100;

			let option = {
				backgroundColor: "transparent",
				title: [
					{
						text: `{number|${this.storageData.storage1.percentage}}{percent|%}`,
						top: "50%",
						left: "50%",
						textAlign: "center",
						textVerticalAlign: "middle",
						textStyle: {
							rich: {
								number: {
									fontSize: 70,
									fontWeight: "bold",
									color: "#fff",
									verticalAlign: "bottom",
								},
								percent: {
									fontSize: 30,
									color: "#fff",
									verticalAlign: "bottom",
									padding: [0, 0, 12, 0],
								}
							}
						},
					},
				],
				series: [
					{
						type: "liquidFill",
						radius: "88%",
						z: 5,
						center: ["50%", "50%"],
						amplitude: 8,
						backgroundStyle: {
							color: "transparent",
						},
						color: [
							{
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 1,
										color: "#0061A2",
									},
									{
										offset: 0,
										color: "#00FFE5",
									},
								],
								globalCoord: false,
							},
							{
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 1,
										color: "#0061A2",
									},
									{
										offset: 0,
										color: "#00FFE5",
									},
								],
								globalCoord: false,
							},
							{
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 1,
										color: "#0061A2",
									},
									{
										offset: 0,
										color: "#00FFE5",
									},
								],
								globalCoord: false,
							},
						],
						data: [
							value + 0.02,
							{
								value: value - 0.01,
								direction: "left",
							},
							value - 0.01,
						],
						label: {
							normal: {
								formatter: "",
							},
						},
						outline: {
							show: true,
							borderDistance: 0,
							itemStyle: {
								borderWidth: 2,
								borderColor: "#2AECFF",
							},
						},
					},
				],
			};

			myChart.setOption(option);
		},
		// 构建右侧圆柱形图表
		buildStorageChart2() {
			let chartContainer = this.$refs.chart2;
			let myChart = echarts.init(chartContainer);
			const value = this.storageData.storage2.percentage / 100;

			let option = {
				backgroundColor: "transparent",
				title: [
					{
						text: `{number|${this.storageData.storage2.percentage}}{percent|%}`,
						top: "50%",
						left: "50%",
						textAlign: "center",
						textVerticalAlign: "middle",
						textStyle: {
							rich: {
								number: {
									fontSize: 70,
									fontWeight: "bold",
									color: "#fff",
									verticalAlign: "bottom",
								},
								percent: {
									fontSize: 30,
									color: "#fff",
									verticalAlign: "bottom",
									padding: [0, 0, 12, 0],
								}
							}
						},
					},
				],
				series: [
					{
						type: "liquidFill",
						radius: "88%",
						 shape: 'roundRect',
						z: 5,
						center: ["50%", "50%"],
						amplitude: 8,
						backgroundStyle: {
							color: "transparent",
						},
						color: [
							{
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 1,
										color: "#0061A2",
									},
									{
										offset: 0,
										color: "#00FFE5",
									},
								],
								globalCoord: false,
							},
							{
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 1,
										color: "#0061A2",
									},
									{
										offset: 0,
										color: "#00FFE5",
									},
								],
								globalCoord: false,
							},
							{
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 1,
										color: "#0061A2",
									},
									{
										offset: 0,
										color: "#00FFE5",
									},
								],
								globalCoord: false,
							},
						],
						data: [
							value + 0.02,
							{
								value: value - 0.01,
								direction: "left",
							},
							value - 0.01,
						],
						label: {
							normal: {
								formatter: "",
							},
						},
						outline: {
							show: true,
							borderDistance: 0,
							itemStyle: {
								borderWidth: 2,
								borderColor: "#2AECFF",
							},
						},
					},
				],
			};
			myChart.setOption(option);
		},
	},
};
</script>

<style scoped lang="scss">
.storage-container {
	display: flex;
	height: 100%;
	gap: 20px;
	padding: 20px 10px;
}

.storage-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.storage-text {
	text-align: left;
	margin-bottom: 15px;
}

.storage-title {
	font-size: 20px;
	color: #fff;
	margin-bottom: 8px;
}

.storage-value {
	font-size: 30px;
	font-weight: bold;
	color: #04fff3;
	margin-bottom: 8px;

	.storage-unit {
		font-size: 20px;
        margin-left: 5px;
		color: rgba(255, 255, 255, 0.8);
	}
}

.storage-subtitle {
	font-size: 20px;
	color: rgba(255, 255, 255, 0.8);
}

.storage-chart {
	flex: 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	.echart-show {
		width: 219px;
		height: 219px;
	}
	.echart-show1 {
		transform: translateY(-17px);
	}
	.echart-show2 {
		transform: translateY(-17px);
		height: 305px;
	}
}
</style>